<template>
	<view>
		<page-head :title="'修改信息'" :headtype="2"></page-head>
		<view class="personal">
			<view class="avatar">
				<button class="button_avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				</button>
				<image v-if="usermsg.avatar == ''" src="'@/static/logo.png'" style="width:150rpx;height:150rpx;border-radius: 50%;" mode="aspectFill"  />
				<image v-if="usermsg.avatar != ''" :src="usermsg.avatar" style="width:150rpx;height:150rpx;border-radius: 50%;" mode="aspectFill" />
			</view>
			<view class="border-top">
				<span>昵称</span>
				<input v-model="usermsg.nick" type="nickname" placeholder="请输入昵称" />
			</view>
			<view>
				<span>手机号</span>
				<input maxlength="11" type="tel" v-model="usermsg.mobile" placeholder="请输入手机号" />
			</view>
			<button class="mainBg" @click="setUserInfo">保存</button>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				usermsg: {
					avatar:'',
					mobile:'',
					nick:'',
				},
				URLimg: this.URLimg,
			};
		},
		onLoad() {
			this.userinfofun()
		},
		methods: {
			onChooseAvatar(e) {
				console.log(e.detail.avatarUrl)
				this.usermsg.avatar = e.detail.avatarUrl;
				// this.apifun.uploadFileimg((res)=>{
				// 	if(res.code == 200){
				// 		this.usermsg.avatar = res.data.src;
				// 	}
				// });
			},
			setUserInfo(){
				let sendData = {
					nick:this.usermsg.nick,
					avatar:this.usermsg.avatar,
					mobile:this.usermsg.mobile,
				};
				this.apifun.unirequest('/api/User/setUserInfo','post',sendData,(res)=>{
					console.log(res)
					if(res.code === 200){
						let datas = res.data;
						this.apifun.toast('保存成功');
						this.apifun.goback()
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			userinfofun() {
				this.apifun.unirequest('/api/User/getUserInfo','post',{},(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						uni.setStorageSync('usermsg',datas);
						this.usermsg = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				},false,true)
			},
		}
	}
</script>

<style lang="scss">
	.personal {
		padding-top: 1rpx;
		
		&>button {
			width: 560rpx;
			height: 90rpx;
			border-radius: 45rpx;
			color: #fff;
			font-size: 15px;
			line-height: 90rpx;
			background: #FF5A19;
			position: fixed;
			bottom: 180rpx;
			left: 50%;
			transform: translateX(-50%);
		}
		
		.border-top{
			border-top: 1px solid #efefef;
		}
		
		&>view{
			width: 100%;
			height: 100rpx;
			border-bottom: 1px solid #efefef;
			display: flex;
			font-size: 15px;
			&>input{
				flex: 1;
				height: 100%;
				font-size: 15px;
			}
			&>span{
				width: 200rpx;
				text-align: center;
				line-height: 100rpx;
			}
		}

		&>.avatar {
			position: relative;
			width: 150rpx;
			height: 150rpx;
			display: block;
			margin: 70rpx auto;
			@include cssimg;
			z-index: 1;
			&>.button_avatar {
				width: 150rpx;
				height: 150rpx;
				position: absolute;
				top: 0rpx;
				left:50%;
				transform: translateX(-50%);
				z-index: 999;
				opacity: 0;
			}
		}
	}
</style>